<div class="navbar navbar-inverse navbar-collapse navbar-fixed-top" id="navbar">
	<div id="navbar-container" class="navbar-container">
		 <button type="button" class="pull-left navbar-toggle collapsed" id="menu-toggler" data-toggle="collapse" data-target=".sidebar">
			<span class="sr-only">Toggle sidebar</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		 </button>
		<div class="navbar-header pull-left">
	    	<a href="javascipt:void();" class="navbar-brand red">
			    <small>
			      <i class="ace-icon fa fa-leaf"></i>
			      CAFE CONTROL
			    </small>
			</a>
			 <button class="pull-right navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-menu">
			   <span class="sr-only">Toggle user menu</span>
			   <i class="ace-icon fa fa-user fa-2x white"></i>
			 </button>
	    </div><!-- /.navbar-header -->
	    <div class="navbar-buttons navbar-header pull-right ">
	      <ul class="nav ace-nav">
	        <ul class="ace ace-nav">
			 <li class="light-blue user-min">
			  <a data-toggle="dropdown" href="javascript:void()" class="dropdown-toggle">
			    <img class="nav-user-photo" src="assets/avatars/avatar.png"/>
			    <span class="user-info">
			      {{user.username}}
			    </span>
			    <i class="ace-icon fa fa-caret-down"></i>
			  </a>
			  <ul class="user-menu dropdown-menu dropdown-menu-right dropdown-yellow dropdown-caret dropdown-close">
			    <li><a href="#"><i class="ace-icon fa fa-cog"></i> Settings</a></li>
			    <li class="divider"></li>
			    <li><a ui-sref="logout"><i class="ace-icon fa fa-power-off"></i> Logout</a></li>
			  </ul>
			 </li>

			</ul>
	      </ul>
	    </div><!-- /.navbar-buttons -->
	    <nav class="navbar-menu pull-left navbar-collapse collapse">
	    	<ul class="nav navbar-nav">
			    <li ng-repeat="(key, item) in menu" ui-sref-active="active">
			      <a ui-sref="{{listState}}({cat:item.cat})">
			        {{item.text}}
			      </a>
			    </li>
			</ul>
	    </nav><!-- /.navbar-menu -->
	</div>
</div><!-- /.navbar -->
<div class="main-container" id="main-container">
	<div class="sidebar responsive sidebar-fixed collpase navbar-collapse" id="sidebar">
		 <div class="sidebar-shortcuts" id="sidebar-shortcuts">
		 	<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
			    <button class="btn btn-success"><i class="ace-icon fa fa-signal"></i></button>
			    <button class="btn btn-info"><i class="ace-icon fa fa-pencil"></i></button>
			    <button class="btn btn-warning"><i class="ace-icon fa fa-users"></i></button>
			    <button class="btn btn-danger"><i class="ace-icon fa fa-cogs"></i></button>
			  </div>
			   <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
			    <span class="btn btn-success"></span>
			    <span class="btn btn-info"></span>
			    <span class="btn btn-warning"></span>
			    <span class="btn btn-danger"></span>
			  </div>
		 </div>
		 <ul class="nav nav-list">
		 	<li ng-repeat="(key, item) in menu" class="highlight" ui-sref-active="active">
			  <a ui-sref="{{listState}}({cat:item.cat})">
			    <!-- <i class="menu-icon fa fa-leaf"></i> -->
			    <span class="menu-text">
			      {{item.text}}
			      <!-- <span class="badge badge-info">4</span> -->
			    </span>
			  </a>
			</li>
		 </ul>
		 <div class="sidebar-toggle sidebar-collapse">
		 	<i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
		 </div>

	</div><!-- /.sidebar -->
	<div class="main-content">
		<div class="page-content">
			<div class="row">
				<div class="col-xs-12">
					<div ui-view></div>
				</div><!-- /.col -->
			</div><!-- /.row -->
		</div><!-- /.page-content -->
	</div><!-- /.main-content -->
</div><!-- /.main-container -->